<!-- 0:写三个媒体查询的例子 @media -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
			/* 2. 小于540px 页面的背景颜色变为粉色 */

			@media screen and (max-width: 539px) {
				body {
					background-color: pink;
				}
			}

			/* 3. 540 ~ 970 我们的页面颜色改为紫色 */
			/* @media screen and (min-width: 540px) and (max-width: 969px) {
				        body {
				            background-color: purple;
				        }
				    } */

			@media screen and (min-width: 540px) {
				body {
					background-color: purple;
				}
			}

			/* 4. 大于等于970 我们页面的颜色改为黄色 */

			@media screen and (min-width: 970px) {
				body {
					background-color: yellow;
				}
			}

			/* 5. screen 还有 and 必须带上不能省略的 */
			/* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
		</style>
	</head>
	<body>
	</body>
</html>
